<table style="vertical-align: top; width: 100%">
  <tr>
    <td colspan="2">
      <div ng-if="activeEditor !== 'ruleDescription'" ng-class="getCssClassForRule()" style="font-weight: bold; text-align: center;">
        <button ng-if="!isDefaultRule()" ng-click="deleteRule()" class="pull-right">
          &times;
        </button>
        <div ng-class="getEditableCssClassForRule()" style="margin-right: 30px;" ng-click="openRuleDescriptionEditorIfNotDefault()">
          <span ng-if="isRuleConfusing()">
            <i class="icon-warning-sign" title="This rule loops back to the same state and has no feedback, so it will probably confuse readers."></i>
          </span>
          <span angular-html-bind="rule | parameterizeRuleDescription: choices"></span>
        </div>
      </div>

      <div ng-if="activeEditor === 'ruleDescription'">
        <div ng-if="!ruleDescriptionPickerIsOpen" ng-class="getCssClassForRule()">
          <div>
            <button ng-click="openRuleDescriptionPicker()" title="Return to rule selector">
              &lt; &lt;
            </button>
          </div>

          <div>
            <span ng-if="rule.description !== 'Default'">
              Answer
            </span>
            <span ng-repeat="item in ruleDescriptionFragments track by $index">
              <span ng-if="item.type == 'select'">
                <select ng-model="rule.definition.inputs[item.varName]" ng-options="choice.id as choice.val for choice in getExtendedChoiceArray(choices.value)">
                </select>
              </span>
              <span ng-if="item.type != 'select' && item.type != 'noneditable'">
                <object-editor obj-type="<[item.type]>" always-editable="true" value="rule.definition.inputs[item.varName]"></object-editor>
              </span>
              <span ng-if="item.type == 'noneditable'">
                <[item.text]>
              </span>
            </span>
            <div>
              <button class="pull-right" ng-click="closeRuleDescriptionEditor()">Close</button>
            </div>
            <div style="clear: both;"></div>
          </div>
        </div>

        <div ng-if="ruleDescriptionPickerIsOpen" class="oppia-rule-bubble-description-picker">
          <h5 style="text-align: left;">Select a rule type</h5>
          <table style="vertical-align: top; width: 100%">
            <tr ng-repeat="(description, name) in allRuleTypes">
              <td>
                Answer <span ng-bind-html="description | bracesToText"></span>
              </td>
              <td>
                <button type="button" class="pull-right"
                        ng-click="selectNewRuleType(description, name)">
                  Select
                </button>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </td>
  </tr>

  <tr ng-class="{'oppia-lightly-grayed': isTmpRule === 'true'}">
    <td class="oppia-feedback-bubble">
      <span ng-if="rule.feedback.length > 0">
        Feedback options (one is chosen at random):
      </span>

      <object-editor obj-type="List" init-args="FEEDBACK_LIST_INIT_ARGS" value="rule.feedback" message-if-empty="This rule provides no feedback.">
      </object-editor>
    </td>

    <td class="oppia-dest-bubble">
      <div class="oppia-align-center" ng-if="activeEditor !== 'ruleDest'">
        <span ng-if="rule.dest == getActiveStateName()">
          ⟳ <[rule.dest]>
        </span>
        <span ng-if="rule.dest == 'END'">
          <[rule.dest]>
        </span>
        <span ng-if="rule.dest != 'END' && rule.dest != getActiveStateName()">
          <a href="/create/<[explorationId]>#/gui/<[rule.dest]>"><[rule.dest]></a>
        </span>
        <button ng-click="openRuleDestEditor()" ng-disabled="isTmpRule === 'true'">
          ✎
        </button>
      </div>

      <div class="oppia-align-center" ng-if="activeEditor === 'ruleDest'">
        Destination:
        <select2-dropdown item="rule.dest" choices="allDests" placeholder="Type destination state name" new-choice-regex="^[A-Z a-z0-9]+$">
        </select2-dropdown>
        <span ng-if="rule.dest == stateName"> ⟳ </span>

        <button ng-click="closeRuleDestEditor()" ng-disabled="!rule.dest">Close</button>
      </div>
    </td>
  </tr>
</table>
